<template>
	<view class="mine_page">
		<view class="u-flex u-flex-between u-flex-items-center p-top-80">
			<view class="u-flex u-flex-items-center">
				<block v-if="Object.keys(userInfo).length == 0">
					<up-avatar size="60"></up-avatar>
					<view @click="login" class="u-m-20">立即登录</view>
				</block>
				<block v-else>
					<view class="_avatar"><up-avatar :size="58" mode="aspectFill" :src="userInfo.avatar"
							@click="previewAvatar()"></up-avatar></view>
					<view class="u-m-l-20">
						<view class=" f-w-b f-s-16 ">{{ userInfo.nickName }}</view>
						<view class="sub_phone">{{ starPhone(userInfo.phonenumber)  }}</view>
					</view>
				</block>
			</view>
			<view class="calling_ u-flex u-flex-center u-flex-items-center" v-if="userInfo.role=='Teacher'"
				@click="goTeacherCalling">
				<text class="u-m-r-6 iconfont">&#xe62d;</text>
				<view class=" f-s-12">专家名片</view>
				<!-- <up-icon name="arrow-right" size="12" color="#fff"></up-icon> -->
			</view>
			<view class="calling_ u-flex u-flex-center u-flex-items-center" v-if="userInfo.role=='User'"
				@click="goUserCalling">
				<text class="u-m-r-6 iconfont">&#xe62d;</text>
				<view class=" f-s-12">个人名片</view>
				<!-- <up-icon name="arrow-right" size="12" color="#fff"></up-icon> -->
			</view>
		</view>
	</view>
	<view class="content_">
		<view class="data_card" v-if="userInfo.role=='Teacher'">
			<view class="f-s-14 u-m-b-26 f-w-b">我的数据</view>
			<u-grid :border="false" col="4" :labelDisabled="true">
				<u-grid-item custom-style="opacity:1" v-for="(teacherListItem,teacherListIndex) in teacherList"
					:key="teacherListIndex">
					<text class="f-s-20 f-w-b">{{teacherListItem.name}}</text>
					<text class="sub-title-two f-s-12 u-m-t-2">{{teacherListItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view>
			<view class="u-flex u-flex-center" v-if="userInfo.role=='User'">
				<view class="invite_">
					<view class="u-flex u-flex-1 u-flex-between u-flex-items-center">
						<view class="u-flex u-flex-items-center">
							<image src="../static/mine/join.png" style="width: 58rpx;height:58rpx;"></image>
							<view class="f-s-12 white u-m-l-20">加入专家团队获取更多权益</view>
						</view>
						<view @click="applyShow = true">
							<u-button color="linear-gradient( 178deg, #5CC4FF 0%, #3790FF 100%);" shape="circle"
								text="立即申请" size="small" :customStyle="{ width: '70px' }"></u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="function_card">
				<view class="f-s-14 u-m-b-28 f-w-b">订单与行程</view>
				<view class="content">
					<u-grid :border="false" col="4">
						<u-grid-item v-for="(menu,index) in orderList" :key="index" @click="click(menu)">
							<view class="u-m-b-36 u-flex u-flex-items-center u-flex-column">
								<image :src="'/static/images/'+menu.url" style="width: 34px" mode="widthFix">
								</image>
								<text class="icon_text">{{menu.title}}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<view class="function_card">
			<view class="f-s-14 u-m-b-34 f-w-b">常用功能</view>
			<view class="content">
				<u-grid :border="false" col="4">
					<block v-for="(menu,index) in studyList" :key="index">
						<u-grid-item v-if="!menu.hide" @click="click(menu)">
							<view class="u-m-b-36 u-flex u-flex-column u-flex-items-center grid_item">
								<image :src="'/static/images/'+menu.url" style="width: 30px;height: 30px;"
									mode="widthFix">
								</image>
								<text class="icon_text">{{menu.title}}</text>
								<view class="_badge" v-if="menu.hot">
									<up-badge :isDot="true" bgColor="#2080f7"></up-badge>
								</view>
							</view>
						</u-grid-item>
					</block>
				</u-grid>
			</view>
		</view>
		<view class="login-out">
			<up-button :customStyle="{width:'320px',borderRadius:'6px'}" color="#bbb" @click="logOut"
				text="退出登录"></up-button>
			<view class="u-m-t-60 ">
				<text @click="toWeb(4)">关于我们</text>
				<text>&nbsp;&nbsp;|&nbsp;&nbsp;</text>
				<text @click="toWeb(3)">服务条款</text>
				<text>&nbsp;&nbsp;|&nbsp;&nbsp;</text>
				<text @click="toWeb(5)">隐私政策</text>
			</view>
		</view>
	</view>
	<up-popup :show="applyShow" @close="close" mode="center" round="8" @open="open" :safeAreaInsetBottom="false">
		<view class="popup">
			<view class="text-center f-s-18 f-w-b">申请入驻</view>
			<view class="u-m-t-44 text-center">
				<view class="select_btn" v-for="(item,index) in radiolist" :key="index"
					:class="{'active':radiovalue==item.value}" @click="selectChange(item.value)">
					{{item.name}}
				</view>
				<view class="u-m-t-20 u-info f-s-12">
					<text>请去网页端完善个人信息</text>
				</view>
			</view>
			<view class="u-m-t-68">
				<u-row justify="space-between" gutter="10">
					<u-col span="5">
						<u-button color="rgba(244, 244, 244, 1)" text="取消" @click="applyShow = false"
							:customStyle="{color: '#666666',width:'184rpx',height:'66rpx'}" iconColor="#fff"></u-button>
					</u-col>
					<u-col span="5">
						<u-button color="rgba(32, 128, 247, 1)" text="申请" :customStyle="{width:'184rpx',height:'66rpx'}"
							@click="joinTeacher" throttleTime="2000"></u-button>
					</u-col>
				</u-row>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"
	import titleText from "@/components/title_text.vue"
	import store from '@/store'
	import {
		starPhone,
		isEmptyObject
	} from '@/utils/common';
	import {
		cardInfo
	} from '@/api/personal.js'
	import {
		path
	} from '@/api/callingCard';
	import {
		getInfo,
		joinTeacherInfo
	} from '@/api/user.js'
	import {
		toast
	} from 'uview-plus';
	const userInfo = ref({})
	const teacher = ref({})
	const applyShow = ref(false)
	const radiovalue = ref('02');
	const top = uni.getMenuButtonBoundingClientRect().top
	const lineHeight = uni.getMenuButtonBoundingClientRect().height
	const ClassList = ref([])
	const orderList = ref([{
			name: '&#xe8bc;',
			url: 'kc.png',
			title: '线上课程',
			page: '/subPackages/order/class_order'
		},
		{
			url: 'zl.png',
			name: '&#xe6cc;',
			title: '资料下载',
			page: '/subPackages/order/profile_order'
		},
		{
			url: 'dd.png',
			name: '&#xe63a;',
			title: '咨询订单',
			page: '/subPackages/order/consult_order',
			// 订阅
			subscribe: true
		},
		{
			name: '&#xe615;',
			url: 'xc.png',
			title: '公开课行程',
			page: '/subPackages/mine/mycourse'
		}
	])
	const teacherList = ref([{
			name: '0',
			title: '资料下载量',
		},
		{
			name: '0',
			title: '课程播放量'
		}, {
			name: '0',
			title: '讲师热度'
		}, {
			name: '0',
			title: '粉丝数'
		}
	])
	const studyList = ref([{
			url: 'mp.png',
			title: '编辑名片',
			page: '/subPackages/mine/visitingCard',
			hot: true,
			hide: true,
		},
		{
			url: 'mp.png',
			title: '编辑名片',
			hot: true,
			page: '/subPackages/mine/userVisitingCard',
		},
		{
			url: 'gkk.png',
			title: '我的公开课',
			page: '/subPackages/mine/mycourse'
		},
		{
			url: 'sc.png',
			title: '我的收藏',
			page: '/subPackages/mine/collect'
		},
		{
			url: 'gz.png',
			title: '我的关注',
			page: '/subPackages/mine/follow',
			hide: false
		},
		{
			url: 'zx.png',
			title: '我的咨询',
			page: '/subPackages/mine/counselling',
			hide: false,
			// 订阅
			subscribe: true
		}, {
			url: 'yq.png',
			title: '我的邀请',
			page: '/subPackages/mine/myinvite',
			hide: false
		}, {
			url: 'zh.png',
			title: '账户安全',
			page: '/subPackages/mine/editPassword',
			hide: false
		},
		{
			url: 'setting.png',
			title: '个人设置',
			page: '/subPackages/mine/set',
			hide: false
		},
		{
			url: 'sph.png',
			title: '视频号',
			tool: 'SPH',
			hide: false
		}
	])
	// 基本案列数据
	const radiolist = [{
			name: '培训专家',
			value: '02'
		}, {
			name: '咨询专家',
			value: '03'
		},
		{
			name: '双师(培训+咨询)',
			value: '04'
		}

	];
	const selectChange = (n) => {
		radiovalue.value = n;
	};
	onShow(() => {
		// 获取用户信息
		store.dispatch('GetInfo').then(({
			user,
			webTeacher
		}) => {
			userInfo.value = user
			teacher.value = webTeacher || {}
			// 判断teacher是否为空
			if (!isEmptyObject(teacher.value)) {
				teacherList.value[0].name = teacher.value.download
				teacherList.value[1].name = teacher.value.play
				teacherList.value[2].name = teacher.value.hot
				teacherList.value[3].name = teacher.value.fans
				studyList.value[0].hide = false
				studyList.value[1].hide = true
			}
		})
	})
	//退出登录
	function logOut() {
		store.dispatch('LogOut').then(resp => {
			uni.showToast({
				title: '退出成功',
				icon: 'success',
				duration: 2000
			})
			uni.switchTab({
				url: '/pages/index'
			})
		})
	}
	//查看专家名片
	function goTeacherCalling() {
		path(teacher.value.id).then(resp => {
			const _path = resp.data || ''
			if (!_path) {
				uni.navigateTo({
					url: '/subPackages/mine/visitingCard'
				})
				return
			}
			// 跳转到名片页面
			uni.navigateTo({
				url: `${_path}?teacherId=${teacher.value.id}`
			})
		})
	}
	//查看个人名片
	function goUserCalling() {
		// 判断有无个人名片
		cardInfo(userInfo.value.userId).then(resp => {
			if (!resp.data) {
				// 弹窗
				uni.showModal({
					title: '提示',
					content: '还未创建个人名片，马上去创建？',
					cancelText: '关闭',
					confirmText: '创建名片',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/subPackages/mine/userVisitingCard'
							})
						}
					}
				})
				return
			}
			uni.navigateTo({
				url: '/subPackages/mine/user_calling?userId=' + userInfo.value.userId
			})
		})
	}
	// 讲师入驻
	function joinTeacher() {
		joinTeacherInfo(
			radiovalue.value
		).then(resp => {
			toast("申请已提交,请登录PC端完善信息")
			applyShow.value = false
		})
	}
	//登录
	function login() {
		uni.navigateTo({
			url: '/pages/authLogin'
		})
	}

	function toWeb(id) {
		uni.navigateTo({
			url: '/subPackages/about/about?id=' + id
		})
	}
	/**预览头像
	 * @param {Object} 
	 */
	function previewAvatar() {
		uni.previewImage({
			urls: [userInfo.value.avatar]
		});
	}

	function click({
		page,
		tool,
		subscribe
	}) {
		if (tool) {
			switch (tool) {
				case 'SPH':
					uni.openChannelsUserProfile({
						finderUserName: 'sphkIVCOeIXUzQp',
					})
					return
			}
			return
		}
		if (!page) {
			return
		}
		if (subscribe) {
			uni.requestSubscribeMessage({
				tmplIds: ['30NqrIc0YGq2bpyoZNc2SsnS6jNEzLSgMb1PgRgO8Q8',
					'aqE7SvgjEdIsdUqHdP6msuU8leTkxBMRxYEQ7MTUiPY'
				],
				complete() {
					uni.navigateTo({
						url: page
					})
				},
			})
			return
		}
		uni.navigateTo({
			url: page
		})
	}

	onShareAppMessage(() => {
		return {
			title: '尧君智库-个人中心',
		}
	})
	onShareTimeline(() => {
		return {
			title: '尧君智库-个人中心',
		}
	})
	// 打开申请对话框 
	function open() {
		applyShow.value = true;
	}
	//关闭申请对话框
	function close() {
		applyShow.value = false;
	}
</script>
<style lang="scss">
	page {
		background-color: #f5f5f5 !important;
	}

	.mine_page {
		padding: 12px 12px 20px;
		background-image: url('https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/05/27/png/bg_20240527135800A012.png');
		background-size: cover;
		background-position: center center; // 设置背景图片位置为居中
		height: 240px;
		position: relative;

		.calling_ {
			width: 160rpx;
			height: 58rpx;
			background: #2080F7;
			border-radius: 180rpx 180rpx 180rpx 180rpx;
			color: #FFFFFF;
		}

		._avatar {
			width: 58px;
			height: 58px;
			border: 2px solid #fff;
			border-radius: 50%;
		}

	}

	.content_ {
		width: 100%;
		position: absolute;
		top: 180px;

		.invite_ {
			background-image: url(https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/06/07/png/Mask_group@3x_20240607144004A012.png);
			width: 622rpx;
			height: 90rpx;
			box-sizing: border-box;
			background-size: cover; // 设置背景图片大小为全图
			background-repeat: no-repeat; // 设置背景图片不重复
			background-position: center center; // 设置背景图片位置为居中
			display: flex; // 设置为flex布局，使子元素可以水平垂直居中
			align-items: center; // 设置子元素垂直居中
			justify-content: center; // 设置子元素水平居中
			font-size: 16px; // 设置文字大小，根据需要调整
			padding: 0 32rpx;
		}

		.data_card {
			margin: 0 12px 10px 12px;
			background-color: #fff;
			border-radius: 12px;
			padding: 8px 16px 24px 16px;
		}

		.function_card {
			margin: 0 12px 10px 12px;
			background-color: #fff;
			box-shadow: 4rpx 8rpx 8rpx 0rpx rgba(155, 155, 155, 0.02);
			border-radius: 12px;
			padding: 8px 16px 8px 16px;

			.content {
				border-radius: 8px;

				.icon_colour {
					font-size: 36px;
					color: #0099ff;
				}

				.icon_text {
					font-size: 12px;
					color: #666666;
					line-height: 14px;
					margin-top: 4rpx;
				}
			}

			.grid_item {
				position: relative;

				._badge {
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}

		.login-out {
			position: absolute;
			padding: 20px 0;
			left: 50%;
			transform: translateX(-50%); // 水平居中对齐
			text-align: center;
			color: #999;
			font-size: 12px;
		}
	}

	.popup {
		width: 560rpx;
		box-sizing: border-box;
		padding: 28rpx 70rpx 48rpx;

		.select_btn {
			margin-top: 24rpx;
			width: 420rpx;
			height: 72rpx;
			background: #F4F4F4;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			line-height: 72rpx;
			color: #666666;
			font-size: 14px;
		}

		.active {
			background: #2080F7;
			color: #FFFFFF;
		}
	}
</style>